<template>
<div>
  <el-tabs v-model="activeName" class="tradebox">
    <el-tab-pane label="求购" name="demand">
      <vue-seamless-scroll :data="DemandList" class="seamless-warp" :class-option="classOption">
        <ul class="demandlist">
          <li v-for="data in DemandList">
            <a :href="'http://www.tongwei.cn/trade.php?mod=view&type=buy&id=' + data.id +'&shop_id=' + data.shop_id" target="_blank">
              <div class="status">
                <div class="widthbox">
                  <span class="title elli">{{ data.kind_name }}</span>
                  <span class="fr color_orange">求购：<div class="fs_20 dp">{{ data.stock }}</div>斤</span>
                </div>
                <div class="widthbox color_8">
                  <span>{{ data.province_name }}</span>
                  <span class="fr">{{ data.updated }}</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </vue-seamless-scroll>
    </el-tab-pane>
    <el-tab-pane label="出售" name="supply">
      <vue-seamless-scroll :data="SupplyList" class="seamless-warp" :class-option="classOption">
        <ul class="supplylist">
          <li v-for="data in SupplyList">
          <a :href="'http://www.tongwei.cn/trade.php?mod=view&type=sell&id=' + data.id +'&shop_id=' + data.shop_id" target="_blank">
            <div class="theme" :style="{backgroundImage: 'url(' + data.img[0] + ')'}">
            </div>
            <div class="status">
              <div class="widthbox">
                <span class="title elli">{{ data.kind_name }}</span>
                <span v-if="data.price == 0" class="fr color_orange">价格面议</span>
                <span v-else class="fr color_orange"><div class="fs_20 dp">{{ data.price }}</div>元/斤</span>
              </div>
              <div class="widthbox color_8">
                <span>{{ data.province_name }}</span>
                <span class="fr">{{ data.updated }}</span>
              </div>
            </div>
          </a>
          </li>
        </ul>
      </vue-seamless-scroll>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  data() {
    return {
      activeName: 'demand',
      SupplyList: [],
      DemandList: [],
    }
  },
  components: {
    vueSeamlessScroll
  },
  mounted() {
    this.getSupplyList();
    this.getDemandList();
  },
  methods: {
    getSupplyList() {
      return axios
        .get("https://service.tongwei.cn/v1.3/3.1/pc/portal/supply/list",{
          params: {
            page: 1,
            size: 12
          }
        })
        .then(response => {
          this.SupplyList = response.data.response_data.data;
        });
    },
    getDemandList() {
      return axios
        .get("https://service.tongwei.cn/v1.3/3.1/pc/portal/demand/list",{
          params: {
            page: 1,
            size: 12
          }
        })
        .then(response => {
          this.DemandList = response.data.response_data.data;
        });
    }
  },
  computed: {
    classOption: function () {
      return {
        step: 0.5,
        limitMoveNum: 5
      }
    }
  }
}
</script>

<style>
@import url("../../styles/common/portal/index.css");
</style>